Conversation
|
Note Reviews pausedUse the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdded comprehensive TipTap editor styling to the runtime UI stylesheet, introducing typography, spacing, and visual presentation rules for editor content including text formatting, lists, task lists, code blocks, blockquotes, and images within the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/studio/src/lib/runtime-ui/styles.css (2)
303-317: Consider addingh3–h6runtime styles for full editor parity.Only
h1andh2are explicitly styled here. If content includes lower heading levels, runtime rendering may look inconsistent relative to editor output.Proposed parity extension
.mdcms-studio-runtime .tiptap h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; margin-top: 0.75em; margin-bottom: 0.25em; } + +.mdcms-studio-runtime .tiptap h3 { + font-size: 1.25rem; + line-height: 1.3; + margin-top: 0.7em; + margin-bottom: 0.25em; +} + +.mdcms-studio-runtime .tiptap h4, +.mdcms-studio-runtime .tiptap h5, +.mdcms-studio-runtime .tiptap h6 { + font-size: 1rem; + line-height: 1.4; + margin-top: 0.6em; + margin-bottom: 0.2em; +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/studio/src/lib/runtime-ui/styles.css` around lines 303 - 317, Add runtime styles for heading levels h3–h6 to match editor parity by extending the existing selectors (.mdcms-studio-runtime .tiptap h3, h4, h5, h6) and defining font-size, line-height, letter-spacing, margin-top and margin-bottom consistent with h1/h2 patterns (smaller font-sizes and slightly adjusted line-heights/letter-spacing for each descending level). Update the .mdcms-studio-runtime .tiptap rules so h3–h6 have clear, progressively smaller font-size values and matching spacing to ensure runtime rendering matches the editor.
320-328: Prefer theme tokens over hardcodedmarkcolors.Using fixed yellow values for
markcan drift from the design token system across themes/brands. Tokenizing this keeps runtime styles consistent with the rest of the palette.Token-based mark styling
.mdcms-studio-runtime .tiptap mark { - background-color: `#fef08a`; + background-color: var(--warning-subtle); border-radius: 0.125rem; padding: 0.125em 0; } .dark .mdcms-studio-runtime .tiptap mark { - background-color: rgba(250, 204, 21, 0.3); + background-color: color-mix(in srgb, var(--warning) 30%, transparent); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/studio/src/lib/runtime-ui/styles.css` around lines 320 - 328, Replace the hardcoded yellow background-colors on the .mdcms-studio-runtime .tiptap mark and .dark .mdcms-studio-runtime .tiptap mark selectors with your theme/design tokens (CSS variables) instead of literal hex/rgba values; update both selectors to use a token like var(--token-mark-bg) and a dark-mode token like var(--token-mark-bg-dark) (with sensible fallbacks) while keeping the existing border-radius and padding properties on the mark element so spacing and shape remain unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/studio/src/lib/runtime-ui/styles.css`:
- Around line 303-317: Add runtime styles for heading levels h3–h6 to match
editor parity by extending the existing selectors (.mdcms-studio-runtime .tiptap
h3, h4, h5, h6) and defining font-size, line-height, letter-spacing, margin-top
and margin-bottom consistent with h1/h2 patterns (smaller font-sizes and
slightly adjusted line-heights/letter-spacing for each descending level). Update
the .mdcms-studio-runtime .tiptap rules so h3–h6 have clear, progressively
smaller font-size values and matching spacing to ensure runtime rendering
matches the editor.
- Around line 320-328: Replace the hardcoded yellow background-colors on the
.mdcms-studio-runtime .tiptap mark and .dark .mdcms-studio-runtime .tiptap mark
selectors with your theme/design tokens (CSS variables) instead of literal
hex/rgba values; update both selectors to use a token like var(--token-mark-bg)
and a dark-mode token like var(--token-mark-bg-dark) (with sensible fallbacks)
while keeping the existing border-radius and padding properties on the mark
element so spacing and shape remain unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 8e825c08-a003-46de-8355-4d2be129dd81
📒 Files selected for processing (1)
packages/studio/src/lib/runtime-ui/styles.css
Collaborator
Author
|
@CodeRabbit pause |
✅ Actions performedReviews paused. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit